<template>
  <div class="carousel">
    <div class="imgContain">
      <div v-for="(item,index) in datas" :key="index" class="img">
        <span :title="item.description">{{item.title}}</span>
        <img :src="item.imgUrl" :title="item.description" @click="toDetail(index)" />
      </div>
    </div>
    <div class="leftBtn" @click="leftBtnClick">
      <i class="iconfont el-icon-arrow-left"></i>
    </div>
    <div class="rightBtn" @click="rightBtnClick">
      <i class="iconfont el-icon-arrow-right"></i>
    </div>
    <div class="progressContain">
      <div class="progress"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Catousel",
  data () {
    return {
      imgHeight: '0',
      left: 0,
      datas: [],
      /* 定义位置对象 */
      posArr: [],    /* 存储位置数组 */
      lis: [],
      idx: 1  // 定义图片信号值，位置默认为第二张图片
    }
  },
  computed: {
  },
  props: {
    recommends: {
      type: Array,
      default: []
    }
  },
  watch: {
    recommends: function (newValue) {
      this.datas = newValue
      newValue && this.init()
    }
  },
  methods: {
    toDetail (index) {
      window.open(this.recommends[index].linkUrl)
      return false
    },
    // debounce (func, delay) {
    //   let timer = null
    //   return function (...args) {
    //     if (timer) clearTimeout(timer)
    //     timer = setTimeout(() => {
    //       // 利用apply改变this的指向
    //       func.apply(this, args)
    //     }, delay)
    //   }
    // },
    initPos () {  // 图片位置初始化
      this.lis.forEach((value, index) => {
        value.style.left = (this.posArr[index]) + 'px'
        if (value.className.indexOf('active') > -1) {
          value.style.zIndex = index + this.lis.length;
        } else {
          value.style.zIndex = index;
        }
      })
    },

    initProgress () { // 进度条初始化
      const progress = document.querySelector(".progress");
      let percent = (this.idx / (this.lis.length - 1)) * 100;
      if (percent == 100) {
        percent = 99
      } else if (percent == 0) {
        percent = 1
      }
      console.log(progress)
      progress.style.width = percent + "%";
    },
    leftBtnClick () {
      if (this.idx == 0) {
        this.lis[this.idx].classList.remove("active");
        this.idx = this.lis.length - 1;
        this.lis[this.idx].classList.add("active");
      } else {
        this.lis[this.idx].classList.remove("active");
        this.idx--;
        this.lis[this.idx].classList.add("active");
      }
      this.posArr.push(this.posArr.shift());  // 改变位置数组，将数组最后一项放在第一项位置
      // 调用方法改变位置
      this.initPos();
      this.initProgress();
      console.log(this.idx)
    },
    rightBtnClick () {
      if (this.idx == this.lis.length - 1) {
        this.lis[this.idx].classList.remove("active");
        this.idx = 0;
        this.lis[this.idx].classList.add("active");
      } else {
        this.lis[this.idx].classList.remove("active");
        this.idx++;
        this.lis[this.idx].classList.add("active");
      }
      this.posArr.unshift(this.posArr.pop()); // 改变位置数组，将第一项放在数组的最后一项
      this.initPos();
      this.initProgress();
    },
    init () {
      this.$nextTick(() => {
        this.lis = document.querySelectorAll(".imgContain .img")
        /* 调用方法初始化 */
        this.lis[this.idx].classList.add("active");
        this.lis.forEach((value, index) => {
          this.posArr.push(this.left)
          this.left = this.left + value.clientWidth
          // value.style.width = document.querySelector('.carousel').style.height + "px";
          if (value.className.indexOf('active') > -1) {
            value.style.zIndex = index + 3;
          } else {
            value.style.zIndex = index;
          }
        })
        this.initPos();
        this.initProgress();
      })
    }
  },
  mounted () {
    setInterval(() => {
      this.rightBtnClick()
    }, 3000)
  },

}
</script>

<style scoped>
.carousel {
  height: 400px;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

.imgContain {
  width: 100%;
  height: 380px;
  list-style: none;
  position: relative;
}

.imgContain > .img:not(.active) {
  width: 375px;
  height: 100%;
  position: absolute;
  bottom: 0;
  display: inline-block;
  transition: all 1s;
}

.imgContain > .img.active {
  width: 500px;
  height: 100%;
  position: absolute;
  bottom: 0;
  display: inline-block;
  transition: all 1s;
}

.imgContain > .img:not(.active) img {
  width: 375px;
  height: 275px;
  position: absolute;
  bottom: 0;
  display: inline-block;
  transition: all 1s;
}

.imgContain > .img.active img {
  width: 500px;
  height: 350px;
  position: absolute;
  bottom: 0;
  display: inline-block;
  transition: all 1s;
}

.imgContain > .img span {
  display: block;
  text-align: center;
  font-weight: 600;
}

.leftBtn,
.rightBtn {
  width: 30px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  cursor: pointer;
  position: absolute;
  top: 45%;
  z-index: 100;
  transition: all 1s;
}

.leftBtn:hover,
.rightBtn:hover {
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 1s;
}

.leftBtn {
  left: 20px;
}

.rightBtn {
  right: 20px;
}

.leftBtn i,
.rightBtn i {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 80px;
  color: #fff;
}

.progressContain {
  /* width: 100; */
  height: 20px;
  border-radius: 20px;
  background-color: #333;
  position: relative;
}

.progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  border-radius: 20px;
  background-color: #b7a58a;
  transition: all 1s;
}

.img {
  display: inline-block;
  width: 300px;
}

.active {
  width: 500px;
  max-height: 100%;
  max-width: 500px;
  position: absolute;
  bottom: 0;
  transition: all 1s;
}
</style>